<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en" class="no-js">
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
    <head>
        <base href="<%=basePath%>">
        <meta charset="utf-8">
        <title>Fullscreen Login</title>

        <meta name="description" content="">
        <meta name="author" content="">

        <!-- CSS -->

        <link rel="stylesheet" type="text/css" href="css/supersized.css">
        <link rel="stylesheet" type="text/css" href="css/formstyle.css">
        <link rel="stylesheet" type="text/css" href="layui/dist/css/layui.css">


    </head>

    <body>

      <div class="page-container">



          <form id="login" class="login-form" action="#" method="post">
              <h1>Login</h1>
              <div class="txtb">
                  <input type="text" name="username">
                  <span style="color: black" aria-placeholder="用户名"></span>
              </div>
              <div class="txtb">
                  <input type="password" name="password">
                  <span style="color: black" aria-placeholder="密码"></span>
              </div>
              <input type="submit" class="logbtn" value="Login">
              <div class="bottom-text">
                  Don't have account?<a id="signbutton" href="#" >Sign up</a>
              </div>
          </form>


          <form style="display: none" id="sign" class="login-form" action="#" method="post">
              <h1>注册</h1>
              <div class="txtb">
                  <input type="text" name="signusername">
                  <span style="color: black" aria-placeholder="请填写要注册的用户名"></span>
              </div>
              <div class="txtb">
                  <input type="password" name="signpassword">
                  <span style="" aria-placeholder="请填写要注册的密码"></span>
              </div>
              <input type="submit" id="signsubmit" class="logbtn" value="Login">
              <div class="bottom-text">
                   haved account?<a id="loginbutton" href="#" >Login</a>
              </div>
          </form>

    </div>
        <!-- Javascript -->
      <script type="application/javascript" src="js/jq.js"></script>
        <script type="application/javascript" src="js/supersized.3.2.7.min.js"></script>
        <script type="application/javascript" src="js/supersized-init.js"></script>
        <script type="application/javascript" src="layui/dist/layui.all.js"></script>

    </body>
    <script>

        var layer
            ,form ;
        $(function () {
            layer=layui.layer;
            form=layui.form;
        })
        // 检测input是否得到了教点如果得到加上focus类以完成我们刚刚设置好的效果
        $(".txtb input").on("focus",function () {
            $(this).addClass("focus")
        })
        $(".txtb input").on("blur",function () {
            if($(this).val()==""){
                $(this).removeClass("focus")
            }
        })

        //注册界面返回登陆界面按钮
        $("#signbutton").on("click",function () {

           $("#login").hide(600,function () {
               $("#sign").show(600)
           })
            return false
        })

        //登陆界面返回注册界面按钮
        $("#loginbutton").on("click",function () {
            $("#sign").hide(600,function () {
                $("#login").show(600)
            })
            return false
        })
        
        <%--$.ajax({--%>
        <%--    type: "GET",--%>
        <%--    url: '<%=path%>/checkuser',--%>
        <%--    dataType:'json',--%>
        <%--    data: {username:$("input[name=username]").val(), password:$("input[name=password]").val()},--%>
        <%--    success: function (result) {--%>
        <%--        // layer.msg("<span style='color:greenyellow'>" + result.message+ "</span>",{--%>
        <%--        //     icon:1,--%>
        <%--        //     time: 2000 //2秒关闭（如果不配置，默认是3秒）--%>
        <%--        // })--%>
        <%--    },--%>
        <%--    error: function(data) {--%>

        <%--        layer.msg("<span style='color:red'>" +data.responseJSON.message+ "</span>",{--%>
        <%--            icon:2,--%>
        <%--            time: 2000 //2秒关闭（如果不配置，默认是3秒）--%>
        <%--        })--%>

        <%--    }--%>

        <%--});--%>

        $("input[name=signtelephone]").on("change",function () {
            if ($("input[name='signtelephone']").val()==''){
                layer.msg('请输入手机号',{
                    icon: 2,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                })
                return false;
            }else if (! /^[0-9]{11}$/.test($("input[name='signtelephone']").val())){
                layer.msg("请输入正确格式的手机号",{
                    icon: 2,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                })
                return false;
            }
        })

        $("input[name=signpassword]").on("change",function () {
            if ($("input[name='signpassword']").val()==''){
                layer.msg('请输入密码',{
                    icon: 2,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                })
                return false;
            }else if (! /^([a-zA-Z0-9]|[._]){5,20}$/.test($("input[name='signpassword']").val())){
                layer.msg("密码只能由5-20个以字母、数字、_.组成",{
                    icon: 2,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                })
                return false;
            }
        })

        $("input[name=signusername]").on("change",function () {
            if (! /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9]){3,10}$/.test($("input[name='signusername']").val())){
                layer.msg("用户名只能由3-10个中文或者字母数字组成",{
                    icon: 2,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                })
                return false;
            }
            $.ajax({
                type: "GET",
                url: '<%=path%>/checkuser',
                dataType:'json',
                data: {username:$("input[name=signusername]").val()},
                success: function (result) {
                    layer.msg("<span style='color:black'>" + result.message+ "</span>",{
                        icon:1,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    })
                },
                error: function(data) {

                    layer.msg("<span style='color:red'>" +data.responseJSON.message+ "</span>",{
                        icon:2,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    })

                }

            });
        })
        //注册提交前端验证
        $("#sign").submit(function (e) {


            if ($("input[name='signusername']").val()==''){
                layer.msg('请输入用户名',{
                    icon: 2,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                })
                return false;
            }else if (! /^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9]){3,10}$/.test($("input[name='signusername']").val())){
                layer.msg("用户名只能由3-10个中文或者字母数字组成",{
                    icon: 2,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                })
                return false;
            }


            // 密码验证
            if ($("input[name='signpassword']").val()==''){
                layer.msg('请输入密码',{
                    icon: 2,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                })
                return false;
            }else if (! /^([a-zA-Z0-9]|[._]){5,20}$/.test($("input[name='signpassword']").val())){
                layer.msg("密码只能由5-20个以字母、数字、_.组成",{
                    icon: 2,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                })
                return false;
            }

            // // 手机号验证
            //   if ($("input[name='signtelephone']").val()==''){
            //     layer.msg('请输入手机号',{
            //           icon: 2,
            //               time: 2000 //2秒关闭（如果不配置，默认是3秒）
            //       })
            //       return false;
            //   }else if (! /^[0-9]{11}$/.test($("input[name='signtelephone']").val())){
            //     layer.msg("请输入正确格式的手机号",{
            //           icon: 2,
            //               time: 2000 //2秒关闭（如果不配置，默认是3秒）
            //       })
            //       return false;
            // }


            $.ajax({
                type: "POST",
                url: '<%=path%>/signuser',
                dataType:'json',
                data: {signusername:$("input[name=signusername]").val(),
                    signpassword:$("input[name=signpassword]").val()
                },
                success: function (result) {
                    console.log(result,result)
                    layer.msg("<span style='color:black'>" + result.message+ "</span>",{
                        icon:1,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    },function () {
                        $("#loginbutton").click()
                        $("input[name=username]").val($("input[name=signusername]").val())
                        $("input[name=password]").val($("input[name=signpassword]").val())

                    })
                },
                error: function(data) {
                    // data=JSON.parse(data)
                    console.log(data.responseJSON.message,data )
                    layer.msg("<span style='color:red'>" +data.responseJSON.message+ "</span>",{
                        icon:2,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    })
                }

            });
            return false
            }
        )

        $("#login").submit(function (){
            $.ajax({
                type: "POST",
                url: '<%=path%>/checkuser',
                dataType:'json',
                data: {username:$("input[name=username]").val(), password:$("input[name=password]").val()},
                success: function (result) {
                    console.log(result.message,result)
                    layer.msg("<span style='color:black'>" + result.message+ "</span>",{
                        icon:1,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    })
                    window.location.href='<%=path%>/index.jsp'
                },
                error: function(data) {
                    // data=JSON.parse(data)
                    console.log(data.responseJSON.message)
                    layer.msg("<span style='color:red'>" +data.responseJSON.message+ "</span>",{
                        icon:2,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    })
                }

            });
            return false
        });




    </script>

</html>

